<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas {
				border: thin solid black;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1200" height="600"></canvas>
		<input type="button" id="reverse" value="颠倒切换" />
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		
		var image = new Image();
		image.src = "file:///D:/tmp/%E5%9B%BE%E7%89%871.png";//<span style="white-space:pre">	</span>//我是图片
		
		context.drawImage(image, 0, 0, canvas.width, canvas.height);
		
		var reverse = document.getElementById("reverse");
		reverse.onclick = showReverse;
		function showReverse() {
			context.translate(canvas.width/2, canvas.height/2);
			context.rotate(Math.PI);
			context.translate(-canvas.width/2, -canvas.height/2);
			
			context.drawImage(image, 0, 0, canvas.width, canvas.height);
		};
	</script>
</html>